<template>
  <div class="outer">
    <!-- <h1>{{ msg }}</h1> -->
    <Form  ref="formInline" class='formless' :label-width="80" :model="formInline" :rules="ruleInline" inline>
        <FormItem label="用户名" prop="user" >
            <Input type="text" v-model="formInline.user" placeholder="请输入用户">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem label="密码"  prop="password" >
            <Input type="password" v-model="formInline.password" placeholder="请输入密码">
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="sign">注册</Button>
            <Button type="primary" @click="login">登陆</Button>
        </FormItem>
    </Form>
    
  </div>
</template>

<script>
import { login as userLogin , signup as userSign} from '@/utils/api';
export default {
  data () {
            return {
                formInline: {
                    user: '',
                    password: ''
                },
                ruleInline: {
                    user: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码.', trigger: 'blur' }
                    ]
                }
            }
        },
  methods: {
            sign(){
              const { user, password} = this.$data.formInline;
              console.log('user---- :>> ', user);
              console.log('password---- :>> ', password);
              const res = userSign(user,password);
              let _this = this
              res.then(function(data){
                console.log('data :>> ', data);
                if(data.status==201){
                  _this.$router.push({name:'sign'})
                }else{
                  _this.$router.push({path:'/'})
                  alert('用户名或密码格式错误')
                }
              })
              // console.log('data++++++ :>> ', data);
              // this.$router.push({name:'sign'})
            },
            login(){
              // const { user, password } = this.$data.formInline;
              const user = 'test1';
              const password = 'WFfjkslfji32434';
              const result = userLogin(user, password);
              // console.log('result :>> ', result);
              // 箭头函数
              // result.then((data) => {
              //   console.log('data :>> ', data,'-------');
              //   console.log('object :>> ', '1233');
              //   if(data.status==201){
              //     this.$router.push({name:'main'})
              //   }else{
              //     this.$router.push({path:'/'})
              //     alert('请先进行注册')
              //   }
              // })

              result.then(function(data) {
                console.log('data :>> ', data,'-------');
                console.log('object :>> ', '1233');
                // let token = null;
                // try {
                //   token = JSON.stringify(data);
                // } catch (error) {
                //   token = '';
                // }
                localStorage.setItem('token', data.data.accessToken);
                if(data.status==201){
                  this.$router.push({name:'main'})
                }else{
                  this.$router.push({path:'/'})
                  alert('请先进行注册')
                }
              });

              
            }
        }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .formless{
    border:2px solid #ccc;
    border-radius: 10px;
    background-color:rgb(194, 220, 224);
    margin:auto;
    width:500px;
    height: 300px;
  }
  .formless > *{
    display:block;
    width:300px;
    /* height:50px; */
    margin:30px 15px 30px;
  }
  button{
    width:70px;
    margin:0 20px;
    height: 40px;
  }
</style>
